<template>
        <view class="rx-city-disabled" v-if="readOnly">{{disabledLabel}}</view>
        <view class="rx-city-box" v-else>
            <view class="rx-city-multiple" @click.stop="selectCity">
                <div class="rx-city-tag" v-for="item of curLabel">
                    <span>{{item.label}}</span>
                    <span class="rx-city-close" v-if="!readOnly" @click.stop="deleteClose(item)">
                    <my-icon type="icon-close"/>
                    </span>
                </div>
                <span class="rx-city-fold-icon" v-if="curLabel.length === 0">
                    <my-icon type="icon-ditu1"/>
                </span>
                <span class="rx-city-fold-icon" v-else @click.stop="empty" >
                <my-icon type="icon-icon-test26"/>
             </span>
            </view>
        </view>
</template>

<script>
import RxEditButton from "@/components/RxEditButton"
import Dialog from "@/js/Dialog";
import MForm from '../js/MForm';
export default {
    name: "MCity",
    mixins:[MForm],
    components: {
        RxEditButton
    },
    data(){
        return {
            curVal:'',
            curLabel: [],
        }
    },
    computed:{
        disabledLabel(){
            let lable = []
            this.curLabel.forEach(res=>{
                lable.push(res.label)
            })
            return lable.join(',')
        }
    },
    created(){

    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        deleteClose(item){
            let list =JSON.parse(this.curVal);
            if(list.value){
                let value = list.value.split(",");
                let label = list.label.split(",");
                value.filter((res,index)=>{
                    if(item.value ==res){
                        value.splice(index,1)
                    }
                })
                label.filter((res,index)=>{
                    if(item.label ==res){
                        label.splice(index,1)
                    }
                })
                let va = {
                    label:label.join(','),
                    value:value.join(',')
                }
                if(va.label){
                    this.updateValue(JSON.stringify(va));
                    this.triggerEmitEvents('change', JSON.stringify(va), this.data)
                }else {
                    this.curLabel = [];
                    this.updateValue('');
                    this.triggerEmitEvents('change', '', this.data)
                }
            }
        },
        checkedData(){
            if(!this.curVal){
                return
            }
            let list = JSON.parse(this.curVal)
            let value = list.value.split(",");
            let label = list.label.split(",");
            this.curLabel = [];
            value.forEach((res,index)=>{
                this.curLabel.push({
                    value:res,
                    label:label[index]
                })
            })

        },
        selectCity(){
            let self =this;
            let conf = {
                data: {
                    dialogOptions:{
                        title:this.i18n('selectCity','请选择城市'),
                        okText:this.i18n('confirm','确定')
                    },
                },
                curVm: this,
            };
            Dialog.openCity(conf, function (data) {
                self.setData(data)
            })
        },
        /**
         * 设置数据
         */
        setData(rows) {
            const item = rows.item
            const jsonstr = {
                "value": item.id,
                "label": item.name
            }
            if(this.metadata.options.mode=='multiple' && this.curVal){
                //多选
                let value = JSON.parse(this.curVal).value;
                let label = JSON.parse(this.curVal).label;
                let valueList = value.split(",");
                let labelList = label.split(",")
                for(let i in valueList){
                    if(valueList[i] == jsonstr.value){
                        this.show = false;
                        return
                    }
                }
                valueList.push(item.id);
                labelList.push(item.name);
                let curValObj = {
                    "value": valueList.join(","),
                    "label": labelList.join(",")
                }
                this.curVal = JSON.stringify(curValObj);

            }else {
                this.curVal = JSON.stringify(jsonstr)
            }
            this.updateValue(this.curVal);
            this.triggerEmitEvents('change', this.curVal, this.data)
        },
        empty(){
            this.curLabel = [];
            this.curVal = ''
            this.updateValue('');
        }
    },
    watch:{
        value: {
            handler(v) {
                this.curVal = v;
                this.checkedData()
            },
            deep: true,
            immediate: true
        },
    }
}
</script>

<style scoped>
.rx-city-box{
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    border-radius: 4px;
    padding-left: 0.625rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    min-height: 2rem;
    margin-top: 0.5rem;
}
.rx-city-multiple{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 2rem;
    padding-right: 2.25rem;
    position: relative;
}
.rx-city-close{
    margin: 0.1rem 0rem 0rem 0.2rem;
}
.rx-city-close > i{
    font-size: 0.7rem;
    color: rgba(34, 34, 34, 1);
}
.rx-city-tag{
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    font-size: 0.9rem;
}


.rx-city-fold-icon i{
    font-size: 1rem;
    color:rgba(204, 204, 204, 1);
}
.rx-city-fold-icon{
    position: absolute;
    right:0rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    width: 2.25rem;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.rx-city-disabled{
    background: rgba(245, 246, 249, 1);
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    border: none;
    margin-top: 0.5rem;
    min-height: 1rem;
}
</style>
